<template>
  <BMap
    class="map"
    v-bind="$attrs"
    height="100%"
    @initd="handleInitd"
    :tilt="55"
    mapStyleId="7cb8408f7fc0bbba8f992b8242a25f98"
    :center="{
            lng: 120.772621,
            lat: 28.250891,
        }"
    :zoom="13"
    :mapType="type"
    :enableDragging="true"
    :enableInertialDragging="true"
    :enableScrollWheelZoom="false"
    :enableContinuousZoom="false"
    :enableDoubleClickZoom="false"
    :enableKeyboard="true"
    :enablePinchToZoom="false"
    :plugins="['Mapvgl', 'Mapv']"
    @pluginReady="handlePluginReady"
  >
    <!-- <BMarker v-if="all.length > 0" v-for="(item, index) in all" :key="index" :position="item.position"
            @click="() => isShow(item)" enableClicking>
            <BInfoWindow v-if="all.length > 0" :width="0" :height="0" v-model:show="show" :position="position"
                :enableCloseOnClick="true" @close="cl()">
                <div class="imgd">
                    <el-image style="width: 100%; height: 100%;" :infinite="false" :max-scale="7" :min-scale="0.2"
                        :src="imgUrl" fit="contain" :previewSrcList="imgList" :initialIndex="index" />
                </div>
            </BInfoWindow>
        </BMarker> -->
    <template v-if="!vLoading">
      <!-- <template v-for="(item, index) in result"> -->
      <BMarker :position="ite.position" v-if="all.length > 0" v-for="(ite, inde) in all" :key="inde" @click="() => isShow(ite)">
        <BInfoWindow
          v-if="all.length > 0"
          :width="0"
          :height="0"
          v-model:show="show"
          :position="position"
          :enableCloseOnClick="true"
          @close="cl()"
          enableAutoPan="false"
        >
          <div class="imgd">
            <el-image style="width: 100%; height: 100%;" :infinite="false" :max-scale="7" :min-scale="0.2" :src="imgUrl" fit="contain" />
          </div>
        </BInfoWindow>
        <BLabel style="color: #333;font-size: 12px" :position="ite.position" :content="'lng:' + ite.position.lng + ',lat:' + ite.position.lat" />
      </BMarker>

      <!-- <BLabel style="color: #333; font-size: 9px" :position="item.point" :content="`${index}. 地址: ${item.address} 所属商圈:${item.business} 最匹配地点: ${item?.surroundingPois[0]?.title || '无'
                    }`"></BLabel> -->
      <!-- </template> -->
      <BZoom anchor="BMAP_ANCHOR_BOTTOM_LEFT" :offset="{ x: 0, y: 0 }"></BZoom>
    </template>
  </BMap>
</template>

<script setup lang="ts">
import { ref, onMounted, type UnwrapRef } from 'vue'
import { MapType, MapProps, Point, type MapMaskShowRegion, usePointGeocoder, PointGeocoderResult } from 'vue3-baidu-map-gl'
import { area } from '@/api/swimming/plan/index'
const type = ref<MapType>('BMAP_NORMAL_MAP')
let imgList: Array<string> = []
const path = shallowRef<Point[]>([])
const center = ref<BMapGL.Point>()
const showRegion = ref<MapMaskShowRegion>('outside')
let counts: Array<number> = []
let langs: Array<Array<number>> = []
interface jwd {
    lng: number,
    lat: number
}
interface marker {
    position: jwd,
    title: string,
    imgurl: string,
}
let all = ref<Array<marker>>([])

const position = ref<jwd>()
const show = ref<boolean>(true)
const imgUrl = ref<string>()

// const { get, result, isLoading } = usePointGeocoder<PointGeocoderResult[]>()
let points: any = []

const cl = () => {
    show.value = false
}
const isShow = (item: UnwrapRef<typeof all>[0]) => {
    position.value = item.position
    imgUrl.value = item.imgurl
    show.value = true
}

function handleInitd() {
    // get(points)
}



onMounted(() => {
    getData()
    intervalid
})

let tempmap: any
let tempView: any = null
let tempLayer: any = null

const handlePluginReady = (_map: any) => {
    tempmap = _map


    let data = []


    // 构造数据
    for (var i = 0; i < langs.length; i++) {
        data.push({
            geometry: {
                type: 'Point',
                coordinates: langs[i]
            },
            properties: {
                count: counts[i]
            }
        })
    }


    if (!tempView) {

        tempView = new mapvgl.View({
            map: _map
        })


    } else {

        // tempView.removeAllLayers()
    }

    if (!tempLayer) {
        tempLayer = new mapvgl.RippleLayer({
            blend: 'er',
            size: 100,
            color: 'red'
        })
        tempLayer.setData(data)


        tempView.addLayer(tempLayer)
    } else {
        // tempLayer.clear()
        tempLayer.setData(data)
    }



}

const getData = async () => {
    all.value = []
    langs = []
    points = []
    var res = await area()
    var dat: Array<any> = res.data['numbers']
    imgList = []
    imgList = res.data['imgs'];

    for (var i = 0; i < dat.length; i++) {
        counts.push(dat[i][2])
        langs.push(dat[i])
        points.push({ lng: dat[i][0], lat: dat[i][1] })
        const temp = reactive<jwd>({
            lng: dat[i][0],
            lat: dat[i][1],
        })
        all.value.push({
            position: temp,
            title: res.data['names'][i],
            imgurl: imgList[i]
        })
    }
    handlePluginReady(tempmap)
    handleInitd()
}
const intervalid = setInterval(() => {
    getData()
}, 10000)

onBeforeUnmount(() => {
    clearInterval(intervalid)
})
</script>

<style lang="scss">
.map {
    height: 100%;
    opacity: 0.9;
}

.imgd {
    display: block !important;
    width: 250px;
    /* width: 20%; */
    height: 200px;
    /* height: 50%; */
    object-fit: contain;
    position: relative;
    z-index: 20;
}

.anchorBL {
    display: none
}

.BMap_stdMpZoom {
    display: block;
}

.BMap_bubble_pop {
  background-color: rgba($color: #000000, $alpha: 0.7) !important;
  border-color: #000000 !important;
}
.BMap_bubble_pop > img {
  display: none;
}
</style>
